<template>
  <div id="row-nav">
    <div class="menu-list flex-row">
      <div :class="['menu-item',{'menu-item-chosen': label === item.label}]" v-for="item in menu" :key="item.label"
           @click="getLabel(item.label)">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['menu'],
  data() {
    return {
      label: ''
    }
  },
  mounted() {
    // console.log(this.$route)
    // this.label = this.$route.query.label
    this.changeLabel()
  },
  methods: {
    getLabel(label) {
      this.label = label
      const name = this.$route.name
      this.$router.push({
        name,
        query: {
          label
        }
      })
    },
    changeLabel(){
      // console.log('改变label',this.$route)
      const query = this.$route.query
      this.$emit('getMenuItem',query)
      if (query.label) {
        this.label = query.label
      } else {
        this.label = this.menu[0].label
      }
    },
  },
  watch: {
    '$route.query.label':function () {
      this.changeLabel()
    },
  },
}
</script>

<style scoped lang="scss">

.menu-item {
  margin-right: 20px;
  padding: 10px 0;
  cursor: pointer;

  &:hover {
    color: #0080ff;
    border-bottom: 2px solid #0080ff;
  }

}

.menu-item-chosen {
  color: #0080ff;
  border-bottom: 2px solid #0080ff;
}
</style>